<template>
	<view class="wallet-page">
		<navigation :navigationMsg="navigationMsg"></navigation>
		<view class="main">
			<view class="wallet-box">
				<view class="balance-box">
					<view class="balance">
						<view class="title">
							钱包余额(元)
						</view>
						<view class="text">
							{{userInfo.money}}
						</view>
					</view>
					<view class="boxc">
						<view class="recharge" @click="go_recharge">
							<view class="text">充值</view>
						</view>
						<view class="recharge" @click="goPayouts">
							<view class="text">提现</view>
						</view>
					</view>
				</view>
				<view class="else-balance-box">
					<view class="available">
						<view class="title">
							可用余额(元)
						</view>
						<view class="text">
							{{userInfo.money}}
						</view>
					</view>
					<view class="freeze">
						<view class="title">
							冻结余额(元)
						</view>
						<view class="text">
							0.00
						</view>
					</view>
				</view>
			</view>
			<view class="Payouts" @click="goPayoutsList">
				<view class="text">提现记录</view>
				<view class="icon"></view>
			</view>
			<view class="top-up-history" @click="goHistory">
				<view class="text">充值记录</view>
				<view class="icon"></view>
			</view>
			<view class="flow">
				<view class="text">资金流水</view>
				<view class="icon"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		http
	} from '@/api/index.js'
	import navigation from '../../../components/navigation.vue';
	export default {
		data() {
			return {
				navigationMsg: {
					title: "我的钱包"
				},
				//用户信息
				userInfo: {},
				//背景色
				bgColor: "#fff",
				//文本色
				textColor: "#2A2D2E"
			}
		},
		components: {
			navigation
		},
		onShow() {
			this.getUserInfo()
			this.getSetting()
		},
		methods: {
			//获取网站配置
			getSetting() {
				http.post('/api/index/getSetting').then(res => {
					document.documentElement.style.setProperty('--bg-color', res.theme_color);
					document.documentElement.style.setProperty('--text-color', res.font_color);
				}).catch(err => {
					console.log(err);
				})
			},
			//获取会员资料
			getUserInfo() {
				http.post('/api/account/getUserInfo').then(res => {
					this.userInfo = res;
				}).catch(err => {

				})
			},
			//跳转充值页面
			go_recharge() {
				uni.navigateTo({
					url: "/pages/my/wallet/recharge/recharge"
				})
			},
			//充值记录
			goHistory() {
				uni.navigateTo({
					url: "/pages/my/wallet/recharge_history/recharge_history"
				})
			},
			//提现
			goPayouts() {
				uni.navigateTo({
					url: "/pages/my/wallet/payouts/payouts"
				})
			},
			//提现记录
			goPayoutsList() {
				uni.navigateTo({
					url: "/pages/my/wallet/payouts_history/payouts_history"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	:root {
		--bg-color: ;
		--text-color: ;
	}

	.wallet-page {
		width: 100%;
		height: 100vh;
		background-color: var(--bg-color);

		.main {
			width: 100%;
			height: calc(100% - 100rpx);
			overflow: hidden;

			.wallet-box {
				width: 90%;
				height: 370rpx;
				background-image: linear-gradient(to bottom, #40A7EF, #098DEA);
				margin: auto;
				margin-top: 30rpx;
				border-radius: 20rpx;

				.balance-box {
					width: 90%;
					height: 220rpx;
					border-bottom: 1px solid #d9d9d9;
					margin: auto;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.balance {
						width: auto;
						height: 200rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-evenly;

						.title {
							color: white;
							font-size: 28rpx;
						}

						.text {
							color: white;
							font-size: 40rpx;
							font-weight: bold;
						}
					}

					.boxc {
						width: auto;
						height: 70%;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.recharge {
							width: 120rpx;
							height: 60rpx;
							background-color: #2C87C6;
							text-align: center;
							line-height: 60rpx;
							color: white;
							font-size: 28rpx;
						}
					}

				}

				.else-balance-box {
					width: 90%;
					height: 150rpx;
					margin: auto;
					display: flex;
					align-items: center;

					>view {
						width: 50%;
						height: 100rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-evenly;

						.title {
							color: white;
							font-size: 28rpx;
						}

						.text {
							color: white;
							font-size: 36rpx;
							font-weight: bold;
						}
					}
				}
			}

			.top-up-history,
			.Payouts,
			.flow {
				width: 90%;
				height: 100rpx;
				background-color: white;
				margin: auto;
				margin-top: 40rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-radius: 20rpx;

				.text {
					font-size: 32rpx;
					font-weight: bold;
					margin-left: 20rpx;
				}

				.icon {
					width: 50rpx;
					height: 50rpx;
					background-image: url("../../../static/rightArrow_black.svg");
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;
				}
			}

			.flow {
				margin-top: 30rpx;
			}
		}
	}
</style>